// mixin 定义与引用 start
@mixin large-text {
    font: {
        family: Arial;
        size: 20px;
        weight: bold;
    }
    color: #ff0000;
}

@mixin clearfix {
    display: inline-block;
    &:after {
        content: '.';
        display: block;
        height: 0;
        clear: both;
        visibility: hidden;
    }
    * html & {
        height: 1px;
    }
}

.page-title {
    @include large-text();
    padding: 4px;
    margin-top: 10px;
}
// mixin 定义与引用 end

// 定义mixin
@mixin sexy-border($color, $width) {
    border: {
        color: $color;
        width: $width;
        style: dashed;
    }
}
//   调用mixin
//  p { @include sexy-border(blue, 1in); }
//   结果
//  p {
//    border-color: blue;
//    border-width: 1in;
//    border-style: dashed; }
